<style lang="scss" scoped>
@import '../../css/resource.scss';

.course-info-box{margin-left: 350px;}
.look-member{color: $mco;cursor: pointer;margin-left: 20px;}

.name-box{border:1px solid #eee;padding: 10px 0;text-align: center;max-height: 400px;overflow-y: auto;}
.name-box span{display: inline-block;width: 80px;height: 40px;line-height: 40px;}
.cilt-list span.edit {
    color:#3F66F6;
    cursor: pointer;
}
</style>

<template>
    <section>
        <section class="upload-info">
            <section class="course-info book-box mt">

                <div class="bookinfo-box clearfix">
                    <div class="fl course-infocover">
                        <img :src="resourceInfo.ResCover" alt="">
                    </div>
                    <div class="course-info-box">
                        <h6 class="fs-16 bookinfo-infotitle">{{resourceInfo.ResName?resourceInfo.ResName:'我是标题'}}</h6>
                        <div class="bookinfo-minor p-rela mt20">
                            <!-- <div class="bim-count p-abso fs-14 bim-text"><span class="fs-18">{{resourceInfo.ViewNum}}</span><br>查阅人数</div> -->

                            <div class="fs-14 bim-text mt">
                                公开范围 <span class="ml20">{{resourceInfo.PermissionType==1?'当前部门':resourceInfo.PermissionType==2?'全体员工':'部分员工'}}</span><span v-show="resourceInfo.PermissionType==3" class="look-member" @click="lookMember">查阅</span>
                            </div>
                            <div class="fs-14 bim-text mt ui-bimtxt" v-if="resourceInfo.ResDesc!=''">
                                课程备注 <span class="ml20">{{resourceInfo.ResDesc}}</span>
                            </div>
                        </div>
                        <div class="bookinfo-dobox mt20">
                            <div class="bid2-one fl" @click="gotoPath('/resource/upload-resource?ComResID='+comResID+'&TabName='+tabName)"><span><img class="share-icon" src="../../images/upload-ic.png" alt=""/></span><span>上传</span></div>
                            <div class="bid2-one fl" @click="gotoPath('/resource/add-resource?ComResID='+comResID+'&TabName='+tabName)"><img class="share-icon" src="../../images/compile_ic.png" alt=""/><span>编辑</span></div>
                            <div class="bid2-one fl" @click="delRes"><img class="share-icon" src="../../images/delete_ic.png" alt=""/><span>删除</span></div>
                        </div>
                    </div>
                </div>

                <div class="course-infolist mt40">
                    <ul class="cil-box clearfix">

                        <li class="fl" @click="dobtn(show2)" >
                            <div class="cil-title fs-16" :class="{'cil-active': active2}">目录</div>
                        </li>
                        <li class="fl" @click="dobtn(show1)">
                            <div class="cil-title fs-16" :class="{'cil-active': active1}">介绍</div>
                        </li>
                    </ul>

                    <div class="cil-introduce pt20" v-show="show1">
                        <div class="mt20 break-word">
                            <div class="cil-des break-word fs-14 pt10 pb10" v-html="resourceInfo.ResAbstract"></div>
                        </div>
                    </div>

                    <div class="mt40" v-show="show2">
                        <div class="mt40">
                            <!--<h6 class="fs-14 cilt-title">目录</h6>-->
                            <div class="mt20">
                                <template v-for="one,index in catalogList">
                                    <div class="cilt-list" >
                                        <span class="fs-14 ciltl-content1">课时{{index+1}}</span>
                                        <span class="fs-14 ciltl-content2 ml20">{{one.Title}}</span>

                                        <div class="fr">
                                            <span class="edit" @click="gotoPath(`/resource/upload-resource?comContentID=${one.ComContentID}&TabName=${one.Title}&ComResID=${comResID}`)">编辑</span>
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div v-show="catalogList.length==0" class="cil-des">暂无课程素材内容，点击上方的“上传”按钮添加课程素材内容</div>
                        </div>
                    </div>
                </div>

            </section>
        </section>

        <el-dialog
                title="可见人员"
                :visible.sync="dialog.centerDialogVisible"
                width="600px"
                center>
            <div class="name-box">
                <template v-for="one in nameList">
                    <span>{{one.Username}}</span>
                </template>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-center" type="primary" @click="dialog.centerDialogVisible = false">知道了</el-button>
            </span>
        </el-dialog>
    </section>

</template>

<script>

	import qs from 'qs'
    import com from 'js/common.js'
	export default{
		data: function(){
			return {
				show1: false,
				show2: true,
				active1: false,
				active2: true ,

                resourceInfo:{
                    ResCover:''
                },
                catalogList:[],
                comResID:this.$route.query.ComResID||'',
                tabName:this.$route.query.TabName||'',
                dialog:{
                    centerDialogVisible:false
                },
                nameList:[],
                path: [
                    {
                        'name':'资源管理',
                        'path':'/resource/book-list'
                    },
                    {
                        'name':'我的资源',
                        'path':'/resource/my-resource'
                    },

                    {
                        'name': '资源详情'
                    }
                ]
            }
		},
		mixins: [mixinMethods],
		methods: {
            gotoBackPage(){
                this.$router.push({name:'resourceMyResource',query:{TabName:this.tabName}})
            },
            gotoPlay(one){
                if(one.FileType=='mp3'||one.FileType=='wma'||one.FileType=='MP3'||one.FileType=='WMA'){
                    sessionStorage.setItem('courseInfoAbstract',one.Content)
                    this.$router.push({name:'resourceCourseContentAudio',query:{resUrl:one.ResObject,title:one.Title,uploadFlag:1,TabName:this.tabName}})
                }
                if(one.FileType=='mp4'||one.FileType=='avi'||one.FileType=='MP4'||one.FileType=='AVI'){
                    sessionStorage.setItem('courseInfoAbstract',one.Content)
                    this.$router.push({name:'resourceCourseContentVideo',query:{resUrl:one.ResObject,title:one.Title,uploadFlag:1,TabName:this.tabName}})
                }
                if(one.FileType==''){
                    sessionStorage.setItem('courseInfoAbstract',one.Content)
                    this.$router.push({name:'resourceCourseContentTxt',query:{title:one.Title,TabName:this.tabName}})
                }
            },
            lookMember(){
                axios.post('/com/com-res/getResourcePermission', qs.stringify({
                    comResID: this.comResID
                })).then((res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.dialog.centerDialogVisible = true;
                        this.nameList = d.data.Row;
                    }else {
                        this.$message.error(d.msg)
                    }
                })
            },
            delRes(){
                this.$confirm('删除后数据不可恢复, 请再次确认是否要删除', '您确定要删除该资源吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('/com/com-res/del', qs.stringify({
                        comResID: this.comResID
                    })).then((res) => {
                        var d = res.data;
                        if(d.flag == 1){
                            this.$message.success('删除成功')
                            this.$router.push({ path: '/resource/my-resource'})
                        }else {
                            this.$message.error(d.msg)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
			dobtn:function(){
				let self = this;
				self.show1 = !self.show1;
				self.show2 = !self.show2;
				self.active1 = !self.active1;
				self.active2 = !self.active2;
			}

		},
		mounted: function(){
            this.$store.commit('setPath', this.path)

            axios.post('/com/com-res/comResDetail', qs.stringify({
                comResID: this.comResID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.resourceInfo = d.data.ComResInfo;
                    this.catalogList = d.data.ComResContent;
                    com.getFullOssFiles([{url:this.resourceInfo.ResCover,param:'image/resize,m_fixed,h_260,w_180'}],(fullUrlArr)=>{
                        this.resourceInfo.ResCover = fullUrlArr[0]
                    })
                }else {
                    this.$message.error(d.msg)
                }
            })
		}
	}


</script>
